<template>
  <!-- 专项监督 -->
  <div class="zxjdPage">
    <div class="leftEcharts" id="zxjd_echarts"></div>
    <div class="rightTab">
      <p
        :class="tabType == index + 1 ? 'tabActive' : ''"
        @click="tabClick(index, item.lelbie)"
        v-for="(item, index) in typeList"
        :key="index"
      >
        <label>{{ item.lelbie }}</label>
      </p>

      <!-- <p :class="tabType == 2 ? 'tabActive' : ''" @click="tabClick(2)">
        <label>文书档案</label>
      </p>
      <p :class="tabType == 3 ? 'tabActive' : ''" @click="tabClick(3)">
        <label>重点项目</label>
      </p>
      <p :class="tabType == 4 ? 'tabActive' : ''" @click="tabClick(4)">
        <label>违规挂证</label>
      </p> -->
    </div>
  </div>
</template>

<script>
import { zhuanxiangtypelist, zhuanxianglist } from "../utils/api";
export default {
  data() {
    return {
      tabType: 1,
      typeList: [],
      dataList: [],
    };
  },
  mounted() {
    // this.drawChart([4, 4, 7, 2, 2, 1, 6, 2, 6]);
    zhuanxiangtypelist().then((res) => {
      console.log("res:" + res);
      this.typeList = res.data;
      zhuanxianglist({ lelbie: this.typeList[0].lelbie }).then((res) => {
        const data = res.data.map((item) => {
          return item.faxianwentishu;
        });
        const company = res.data.map((item) => {
          return item.beiJianduDanwei;
        });
        this.drawChart(data, company);
      });
    });
  },
  methods: {
    tabClick(index, lelbie) {
      this.tabType = index + 1;
      // if (t === 1) {
      //   data = [4, 4, 7, 2, 2, 1, 6, 2, 6];
      // }
      // if (t === 2) {
      //   data = [15, 13, 13, 10, 7, 4, 5, 6, 6];
      // }
      // if (t === 3) {
      //   data = [1, 0, 1, 1, 9, 1, 0, 3, 3];
      // }
      // if (t === 4) {
      //   data = [0, 1, 0, 7, 3, 0, 0, 1, 2];
      // }
      zhuanxianglist({ lelbie: lelbie }).then((res) => {
        const data = res.data.map((item) => {
          return item.faxianwentishu;
        });
        const company = res.data.map((item) => {
          return item.beiJianduDanwei;
        });
        this.drawChart(data, company);
      });
    },
    drawChart(data, company) {
      var myChart = this.$echarts.init(document.getElementById("zxjd_echarts"));
      // const sum = eval(data.join("+"));
      var colors = [
        {
          type: "linear",
          x: 0,
          x2: 0,
          y: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#22a6fd",
            },
            {
              offset: 0.5,
              color: "#1492fd",
            },
            {
              offset: 0.5,
              color: "#136dfd",
            },
            {
              offset: 1,
              color: "#22a6fd",
            },
          ],
        },
      ];

      var barWidth = 20;

      var option = {
        grid: {
          top: "0%",
          bottom: "0%",
          left: "25%",
          right: "10%",
        },
        yAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#d0e0fe",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#152f60",
              type: "dotted",
            },
          },
          // data: [
          //   "自贸高投公司",
          //   "供应链公司",
          //   "国诚涂镀板公司",
          //   "高新城发公司",
          //   "产投建设公司",
          //   "恒泰公司",
          //   "同富公司",
          //   "国投公司",
          //   "高投公司",
          // ],
          data: company,
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#8da8d5",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#143162",
              type: "dotted",
            },
          },
        },
        series: [
          {
            z: 1,
            type: "bar",
            barWidth: barWidth,
            data,
            itemStyle: {
              normal: {
                color: colors[0],
              },
            },
          },
          {
            z: 2,
            name: "底部",
            type: "pictorialBar",
            data: [1, 1, 1, 1, 1],
            symbol: "diamond",
            symbolOffset: ["-50%", 0],
            symbolSize: [0, barWidth],
            itemStyle: {
              normal: {
                color: colors[0],
              },
            },
          },
          {
            z: 3,
            name: "上部1",
            type: "pictorialBar",
            symbolPosition: "end",
            data,
            symbol: "diamond",
            symbolOffset: ["50%", 0],
            symbolSize: (rawValue) => {
              return rawValue === 0
                ? 0
                : [(10 * (barWidth - 0)) / barWidth, barWidth - 0];
            },
            itemStyle: {
              normal: {
                borderColor: "#136dfd",
                borderWidth: 2,
                color: "#1492fd",
              },
            },
            // label: {
            // 	show: true,
            // 	position: 'right',
            // 	formatter: p => {
            // 		return (p.value);
            // 	},
            // 	fontSize: 13,
            // 	color: '#81adff'
            // },
          },
        ],
      };
      // 图表自适应
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zxjdPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  display: flex;
  flex-direction: row;
  padding: 20px 10px;
  box-sizing: border-box;

  .leftEcharts {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
  }

  .rightTab {
    width: 30px;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    transition: 0.5s;

    p {
      width: 30px;
      height: 100%;
      flex: 1;
      margin: 0;
      float: left;
      padding: 0;

      label {
        width: 30px;
        height: 100%;
        text-align: center;
        background: url("../assets/img/tabBg.png") center no-repeat;
        background-size: 100% 100%;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 12px;
        color: #d0e0fe;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      &:hover,
      &.tabActive {
        label {
          font-weight: bold;
          background: url("../assets/img/tabActiveBg.png") center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
